<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      input {
        outline: none;
      }
      input::placeholder {
        font-size: 12px;
      }
      a {
        text-decoration: none;
        font-size: 14px;
      }
      form input {
        box-sizing: border-box;
        padding-left: 10px;
        width: 160px;
        height: 25px;
        border: 1px solid #ccc;
        border-radius: 3px;
      }
      form input:nth-child(2) {
        margin-left: 10px;
      }
      form button {
        box-sizing: border-box;
        margin-left: 10px;
        padding: 0 10px;
        height: 25px;
        border: none;
        background-color: #036fff;
        color: #fff;
        font-size: 11px;
        border-radius: 3px;
        vertical-align: middle;
      }
      table {
        width: 420px;
        border-collapse: collapse;
      }
      table tr {
        height: 30px;
        border-bottom: 1px solid #ccc;
      }
      table th,
      td {
        font-size: 14px;
        text-align: center;
      }
      .echarts {
        width: 500px;
        height: 260px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <form>
        <input v-model.trim="msg" type="text" placeholder="消费名称" />
        <input v-model.number="price" type="text" placeholder="消费价格" />
        <button @click.prevent="add">添加账单</button>
      </form>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>消费名称</th>
            <th>消费价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list">
            <td>{{index + 1}}</td>
            <td>{{item.msg}}</td>
            <td>{{item.price.toFixed(2)}}</td>
            <td><a href="#" @click.prevent="del(item.id)">删除</a></td>
          </tr>
          <tr>
            <td colspan="4" style="padding-left: 10px; text-align: left">
              消费总计: {{ totalPrice }}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="echarts">
        <!-- 准备容器 -->
      </div>
    </div>
    <script src="./vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script>
      new Vue({
        el: "#box",
        data: {
          list: [
            { id: 0, msg: "手表", price: 299 },
            { id: 1, msg: "棉大衣", price: 599 },
            { id: 2, msg: "鸭舌帽", price: 99 },
            { id: 3, msg: "球鞋", price: 399 },
          ],
          msg: "",
          price: "",
        },
        mounted() {
          // DOM结构创建完成
          console.log(
            this.list.map((item) => {
              return item.msg;
            })
          );
          const myEcharts = echarts.init(document.querySelector(".echarts"));
          const option = {
            title: {
              text: "消费价格图标",
              left: "right",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "价格",
                type: "pie",
                data: this.list.map((item) => {
                  return { value: item.price, name: item.msg };
                }),
              },
            ],
          };
          myEcharts.setOption(option);
        },
        methods: {
          add() {
            if (this.msg !== "" && this.price !== "") {
              this.list.push({
                id: +new Date(),
                msg: this.msg,
                price: this.price,
              });
            }
            this.msg = "";
            this.price = "";
          },
          del(id) {
            this.list = this.list.filter((item) => {
              return item.id !== id;
            });
          },
        },
        computed: {
          totalPrice() {
            return this.list
              .reduce((sum, item) => {
                return sum + item.price;
              }, 0)
              .toFixed(2);
          },
        },
      });
    </script>
  </body>
</html>
